<template>
  <div>
    <p>商品如下</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.shopName }}--{{ item.price }}
      </li>
    </ul>
    <lianxi6
      v-for="(item, index) in list"
      :key="index + ''"
      :name="item.shopName"
      :ind="index"
      :count="item.count"
      @btns="fn1"
      @adds="fn2"
    ></lianxi6>
    <p>总结为：{{ suanming }}</p>
  </div>
</template>

<script>
import lianxi6 from "./conmporints/lianxi6.vue";
export default {
  data() {
    return {
      list: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  components: {
    lianxi6,
  },
  methods: {
    fn1(ind) {
      this.list[ind].count++;
    },
    fn2(ind) {
      this.list[ind].count > 0 && this.list[ind].count--;
    },
  },
  computed: {
    suanming() {
      return this.list.reduce((usm, obj) => (usm += obj.count * obj.price), 0);
    },
  },
};
</script>

<style>
</style>